<template>
  <div>
    <el-card class="margin30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button type="primary" size="mini" @click="dialogFormVisible = !dialogFormVisible">新增</el-button>

      </div>
      <el-table :data="list" border stripe>
        <!-- <el-table-column
          prop="id"
          label="#"
        >
          <template v-slot="scope">
            {{ scope.$index +1 }}
          </template>
        </el-table-column> -->
        <el-table-column
          type="index"
          label="#"
        />
        <el-table-column
          prop="addressName"
          label="地址名称"
        />
        <el-table-column
          prop="id"
          label="默认发货地址"
        >
          <template v-slot="scope">
            默认发货地址:  <el-switch v-model="scope.row.sendStatus" @change="toggle(scope.row.id)" />

          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="收货人姓名"
        />
        <el-table-column
          prop="phone"
          label="收货人手机号"
        />
        <el-table-column
          prop="phone"
          label="删除"
        >
          <!-- <slot name="张三" age="30"></slot> -->
          <template v-slot="scope1">
            <el-link type="primary" :underline="true" @click="edit(scope1.row)">编辑</el-link>
            <el-link type="warning" :underline="true" @click="del(scope1.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <el-dialog title="地址详情" :visible.sync="dialogFormVisible" @close="reset">
      <el-form ref="form" :model="form" label-width="120px" :inline="false" size="mini">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="地址名称">
              <el-input v-model="form.addressName" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="收货人姓名">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="收货人手机号">
              <el-input v-model="form.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="邮政编码">
              <el-input v-model="form.postCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="收货地址">
              <!-- <el-input v-model="form."></el-input> -->
              <el-cascader
                v-model="selectedOptions"
                size="mini"
                :options="regionData"
                @change="uptAddress"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="详细地址">
              <el-input v-model="form.detailAddress" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addressList,
  companyAddress,
  delCompanyAddress,
  save,
  update
} from '@/api/orderManage/address/index.js'
import { regionData, codeToText } from 'element-china-area-data'
export default {
  data() {
    return {
      regionData,
      selectedOptions: '',
      list: [],
      dialogFormVisible: false,
      form: {
        'addressName': '',
        'city': '',
        'cityCode': '',
        'createTime': '',
        'detailAddress': '',
        'id': '',
        'modifyTime': '',
        'name': '',
        'phone': '',
        'postCode': '',
        'province': '',
        'receiveStatus': '',
        'region': '',
        'sendStatus': ''
      }
    }
  },
  computed: {

  },
  created() {
    this.init()
  },
  mounted() {

  },
  methods: {
    reset() {
      this.selectedOptions = ''
      this.form = {
        'addressName': '',
        'city': '',
        'cityCode': '',
        'createTime': '',
        'detailAddress': '',
        'id': '',
        'modifyTime': '',
        'name': '',
        'phone': '',
        'postCode': '',
        'province': '',
        'receiveStatus': '',
        'region': '',
        'sendStatus': ''
      }
    },
    edit(val) {
      this.selectedOptions = val.cityCode.split(',')
      this.form = val
      this.dialogFormVisible = !this.dialogFormVisible
    },
    uptAddress(val) {
      console.log(val)
      console.log(codeToText[val[0]])
      this.form.province = codeToText[val[0]]
      this.form.city = codeToText[val[1]]
      this.form.region = codeToText[val[2]]
      this.form.cityCode = val.join(',')
    },
    onSubmit() {
      var data = JSON.parse(JSON.stringify(this.form))
      data.sendStatus = data.sendStatus ? 1 : 0
      if (this.form.id) {
        update(data)
          .then(res => {
            console.log(res)
            this.dialogFormVisible = !this.dialogFormVisible
            this.init()
          })
        return
      }

      save(data)
        .then(res => {
          console.log(res)
          this.dialogFormVisible = !this.dialogFormVisible
          this.init()
        })
    },
    del(id) {
      delCompanyAddress(id)
        .then(res => {
          this.init()
        })
    },
    init() {
      addressList()
        .then(res => {
          console.log(res)
          res.data.items.forEach(el => {
            el.sendStatus = !!el.sendStatus
          })
          this.list = res.data.items
        })
    },
    toggle(id) {
      companyAddress({
        id
      })
        .then(res => {
          this.init()
        })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
